<?php

require_once '../config.php';
session_start();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Comments &laquo; Admin</title>
    <link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/assets/vendors/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/static/assets/vendors/nprogress/nprogress.css">
    <link rel="stylesheet" href="/static/assets/css/admin.css">
    <script src="/static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
<script>NProgress.start()</script>

<div class="main">
    <?php include 'inc/navbar.php'; ?>

    <div class="container-fluid">
        <div class="page-title">
            <h1>所有评论</h1>
        </div>
        <!-- 有错误信息时展示 -->
        <!-- <div class="alert alert-danger">
          <strong>错误！</strong>发生XXX错误
        </div> -->
        <div class="page-action">
            <!-- show when multiple checked -->
            <div class="btn-batch" style="display: none">
                <button class="btn btn-info btn-sm">批量批准</button>
                <button class="btn btn-warning btn-sm">批量拒绝</button>
                <button class="btn btn-danger btn-sm">批量删除</button>
            </div>
            <ul class="pagination pagination-sm pull-right">

            </ul>
        </div>
        <table class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th class="text-center" width="40"><input type="checkbox"></th>
                <th>作者</th>
                <th>评论</th>
                <th>评论在</th>
                <th>提交于</th>
                <th>状态</th>
                <th class="text-center" width="100">操作</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>

<?php $current_page = 'comments'; ?>
<?php include 'inc/sidebar.php'; ?>

<script src="/static/assets/vendors/jquery/jquery.js"></script>
<script src="/static/assets/vendors/bootstrap/js/bootstrap.js"></script>
<script src="/static/assets/vendors/jsrender/jsrender.js"></script>
<script src="/static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
<script id="comment_tmpl" type="text/x-template-web">

    {{for comments}}
    <tr{{if status == 'held'}} class="warning"{{else status == 'rejected'}} class="danger"{{/if}} data-id="{{:id}}">
    <td class="text-center"><input type="checkbox"></td>
    <td>{{:author}}</td>
    <td>{{:content}}</td>
    <td>{{:post_title}}</td>
    <td>{{:created}}</td>
    <td>{{:status}}</td>
    <td class="text-center" width="150">
        {{if status == 'held'}}
        <a href="post-add.php" class="btn btn-info btn-xs">批准</a>
        <a href="post-add.php" class="btn btn-warning btn-xs">拒绝</a>
        {{/if}}
        <a href="javascript:;" class="btn btn-danger btn-xs btn-delete">删除</a>
    </td>
    </tr>
    {{/for}}

</script>
<script>
    $(function () {


        // // nprogress
        $(document)
            .ajaxStart(function () {
                NProgress.start()
            }).ajaxStop(function () {
            NProgress.done()
        });

        let currentPage = 1;

        //ajax请求服务端数据
        function loadPage(page) {
            $.getJSON('/admin/api/comment.php', {page: page}, function (res) {
                if (page > res.total_page){
                    loadPage(res.total_page);
                    return false;
                }
                $('.pagination').twbsPagination('destroy');
                $('.pagination').twbsPagination({
                    first: '&laquo;',
                    last: '&raquo;',
                    prev: '&lt;',
                    next: '&gt;',
                    startPage : page,
                    totalPages: res.total_page,
                    visiblePages: 5,
                    initiateStartPageClick : false,
                    onPageClick: function (e, page) {
                        loadPage(page);
                    }
                });
                //通过模板引擎渲染数据
                let html = $('#comment_tmpl').render({
                    comments: res.comment,
                });
                $('tbody').html(html);
                currentPage = page;
            })
        }


        $('.pagination').twbsPagination({
            first: '&laquo;',
            last: '&raquo;',
            prev: '&lt;',
            next: '&gt;',
            totalPages: 100,
            visiblePages: 5,
            onPageClick: function (e, page) {
                loadPage(page);
            }
        });

        loadPage(currentPage);

        $('tbody').on('click', '.btn-delete', function () {
            let $tr = $(this).parents('tr');
            let id = $tr.data('id');
            $.get('/admin/comments-delete.php', {id: id}, function (res) {
                if (!res) return;
                //$tr.remove();
                loadPage(currentPage);
            })
        });
    });

</script>

<script>NProgress.done()</script>
</body>
</html>
